import React from 'react'
import {
  Card,
  Form,
  Button,
  Input,
  Checkbox,
  Radio,
  Select,
  Switch,
  DatePicker,
  TimePicker,
  Upload,
  Icon,
  message,
  InputNumber,
  Row,
  Col,
  Rate,
  Slider
} from 'antd'
import moment from 'moment';


const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;

export default Form.create()(class FormRegister extends React.Component {
    state = {}
    handleSubmit = () => {
      let userInfo = this.props.form.getFieldsValue();
      console.log(JSON.stringify(userInfo))
      message.success(`${userInfo.userName} 恭喜你，您通过本次表单组件学习，当前密码为：${userInfo.userPwd}`)
    }

    getBase64 = (img, callback) => {
      const reader = new FileReader();
      reader.addEventListener('load', () => callback(reader.result));  //todo 返回URL
      reader.readAsDataURL(img);
    }

    handleChange = (info) => {
      if (info.file.status === 'uploading') {
        this.setState({loading: true});
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        this.getBase64(info.file.originFileObj, imageUrl => this.setState({
          userImg: imageUrl,
          loading: false,
        }));
      }
    }

    handleSubmit = e => {
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    };

    normFile = e => {
      console.log('Upload event:', e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    };


    render() {
      const {getFieldDecorator} = this.props.form;
      const formItemLayout = {
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},

        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 8},
        }
      }
      const offsetLayout = {
        wrapperCol: {
          xs: 24,
          sm: {
            span: 12,
            offset: 4
          }
        }
      }
      const rowObject = {
        minRows: 4, maxRows: 6
      }

      return (
        <div>
          <Card title="注册表单" style={{marginTop: 10}}>
            <Form layout="horizontal">

              <FormItem label="用户名" {...formItemLayout} >
                {
                  getFieldDecorator('userName', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '用户名不能为空'
                      },
                      {
                        min: 5, max: 10, message: '长度不在范围内'
                      },
                      {
                        pattern: new RegExp('^\\w+$', 'g'),
                        message: '用户名必须为字母或者数字'
                      }
                    ]
                  })(
                    <Input placeholder="请输入用户名"/>
                  )
                }
              </FormItem>

              <FormItem label="密码" {...formItemLayout}>
                {
                  getFieldDecorator('userPwd', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '密码不能为空'
                      },
                      {
                        min: 5, max: 10, message: '长度不在范围内'
                      },
                      {
                        whitespace: true,
                        message: '密码必须为字母或者数字'
                      }
                    ]

                  })(
                    <Input.Password type="password" placeholder="请输入密码"/>
                  )
                }
              </FormItem>

              <FormItem label="性别" {...formItemLayout}>
                {
                  getFieldDecorator('sex', {
                    initialValue: '2'
                  })(
                    <RadioGroup>
                      <Radio value="1">男</Radio>
                      <Radio value="2">女</Radio>
                    </RadioGroup>
                  )
                }
              </FormItem>


              <FormItem label="性别" {...formItemLayout}>
                {
                  getFieldDecorator('sex', {
                    initialValue: 'size'
                  })(
                    <Radio.Group>
                      <Radio.Button value="large">Large</Radio.Button>
                      <Radio.Button value="default">Default</Radio.Button>
                      <Radio.Button value="small">Small</Radio.Button>
                    </Radio.Group>
                  )
                }
              </FormItem>


              <FormItem label="年龄" {...formItemLayout}>
                {
                  getFieldDecorator('age', {
                    initialValue: 18
                  })(
                    <InputNumber/>
                  )
                }
              </FormItem>
              <FormItem label="当前状态" {...formItemLayout}>
                {
                  getFieldDecorator('state', {
                    initialValue: '5'
                  })(
                    <Select>
                      <Option value="1">咸鱼一条</Option>
                      <Option value="2">风华浪子</Option>
                      <Option value="3">北大才子一枚</Option>
                      <Option value="4">百度FE</Option>
                      <Option value="5">创业者</Option>
                    </Select>
                  )
                }
              </FormItem>
              <FormItem label="爱好" {...formItemLayout}>
                {
                  getFieldDecorator('interest', {
                    initialValue: ['2', '5']
                  })(
                    <Select mode="multiple">
                      <Option value="1">游泳</Option>
                      <Option value="2">打篮球</Option>
                      <Option value="3">踢足球</Option>
                      <Option value="4">跑步</Option>
                      <Option value="5">爬山</Option>
                      <Option value="6">骑行</Option>
                      <Option value="7">桌球</Option>
                      <Option value="8">麦霸</Option>
                    </Select>
                  )
                }
              </FormItem>
              <FormItem label="是否已婚" {...formItemLayout}>
                {
                  getFieldDecorator('isMarried', {
                    valuePropName: 'checked',
                    initialValue: true
                  })(
                    <Switch/>
                  )
                }
              </FormItem>
              <FormItem label="生日" {...formItemLayout}>
                {
                  getFieldDecorator('birthday', {
                    initialValue: moment('2018-08-08')
                  })(
                    <DatePicker
                      showTime
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  )
                }
              </FormItem>
              <FormItem label="联系地址" {...formItemLayout}>
                {
                  getFieldDecorator('address', {
                    initialValue: '北京市海淀区奥林匹克公园'
                  })(
                    <TextArea
                      autosize={rowObject}
                    />
                  )
                }
              </FormItem>
              <FormItem label="早起时间" {...formItemLayout}>
                {
                  getFieldDecorator('time')(
                    <TimePicker/>
                  )
                }
              </FormItem>
              <FormItem label="头像" {...formItemLayout}>
                {
                  getFieldDecorator('userImg')(
                    <Upload
                      listType="picture-card"
                      showUploadList={true}
                      action="//jsonplaceholder.typicode.com/posts/"
                      onChange={this.handleChange}
                    >
                      {this.state.userImg ? <img src={this.state.userImg}/> : <Icon type="plus"/>}
                    </Upload>
                  )
                }
              </FormItem>
              <FormItem {...offsetLayout}>
                {
                  getFieldDecorator('userImg')(
                    <Checkbox>我已阅读过<a href="#">慕课协议</a></Checkbox>
                  )
                }
              </FormItem>
              <FormItem {...offsetLayout}>
                <Button type="primary" onClick={this.handleSubmit}>注册</Button>
              </FormItem>
            </Form>
          </Card>


          <Card>
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
              <Form.Item label="纯文本">
                <span className="ant-form-text">China</span>
              </Form.Item>

              <Form.Item label="Select" hasFeedback>
                {getFieldDecorator('select', {
                  rules: [{required: true, message: '请选择您的国家!'}],
                })(
                  <Select placeholder="请选择您的国家">
                    <Option value="china">China</Option>
                    <Option value="usa">U.S.A</Option>
                  </Select>,
                )}
              </Form.Item>

              <Form.Item label="Select[multiple]" hasFeedback>
                {getFieldDecorator('select-multiple', {
                  rules: [
                    {required: true, message: '请选择您最喜欢的颜色！', type: 'array'},
                  ],
                })(
                  <Select mode="multiple" placeholder="请选择您最喜欢的颜色！">
                    <Option value="red">Red</Option>
                    <Option value="green">Green</Option>
                    <Option value="blue">Blue</Option>
                  </Select>,
                )}
              </Form.Item>

              <Form.Item label="InputNumber">
                {getFieldDecorator('input-number', {initialValue: 3})(<InputNumber min={1} max={10}/>)}
                <span className="ant-form-text">盒</span>
              </Form.Item>

              <Form.Item label="Switch">
                {getFieldDecorator('switch', {valuePropName: 'checked'})(<Switch/>)}
              </Form.Item>

              <Form.Item label="Slider">
                {getFieldDecorator('slider')(
                  <Slider
                    marks={{
                      0: 'A',
                      10: 'B',
                      20: 'C',
                      40: 'D',
                      60: 'E',
                      80: 'G',
                      100: 'H',
                    }}
                  />,
                )}
              </Form.Item>

              <Form.Item label="Radio.Group">
                {getFieldDecorator('radio-group')(
                  <Radio.Group>
                    <Radio value="a">item 1</Radio>
                    <Radio value="b">item 2</Radio>
                    <Radio value="c">item 3</Radio>
                  </Radio.Group>,
                )}
              </Form.Item>

              <Form.Item label="Radio.Button">
                {getFieldDecorator('radio-button')(
                  <Radio.Group>
                    <Radio.Button value="a">item 1</Radio.Button>
                    <Radio.Button value="b">item 2</Radio.Button>
                    <Radio.Button value="c">item 3</Radio.Button>
                  </Radio.Group>,
                )}
              </Form.Item>

              <Form.Item label="Checkbox.Group">
                {getFieldDecorator('checkbox-group', {
                  initialValue: ['A', 'B'],
                })(
                  <Checkbox.Group style={{width: '100%'}}>
                    <Row>
                      <Col span={8}>
                        <Checkbox value="A">A</Checkbox>
                      </Col>
                      <Col span={8}>
                        <Checkbox disabled value="B">
                          B
                        </Checkbox>
                      </Col>
                      <Col span={8}>
                        <Checkbox value="C">C</Checkbox>
                      </Col>
                      <Col span={8}>
                        <Checkbox value="D">D</Checkbox>
                      </Col>
                      <Col span={8}>
                        <Checkbox value="E">E</Checkbox>
                      </Col>
                    </Row>
                  </Checkbox.Group>,
                )}
              </Form.Item>

              <Form.Item label="Rate">
                {getFieldDecorator('rate', {
                  initialValue: 3.5,
                })(<Rate/>)}
              </Form.Item>

              <Form.Item label="Upload" extra="额外的描述">
                {getFieldDecorator('upload', {
                  valuePropName: 'fileList',
                  getValueFromEvent: this.normFile,
                })(
                  <Upload name="logo" action="/upload.do" listType="picture">
                    <Button>
                      <Icon type="upload"/> 点击上传
                    </Button>
                  </Upload>,
                )}
              </Form.Item>

              <Form.Item label="Dragger">
                <div className="dropbox">
                  {getFieldDecorator('dragger', {
                    valuePropName: 'fileList',
                    getValueFromEvent: this.normFile,
                  })(
                    <Upload.Dragger name="files" action="/upload.do">
                      <p className="ant-upload-drag-icon">
                        <Icon type="inbox"/>
                      </p>
                      <p className="ant-upload-text">单击或拖动文件到此区域进行上载</p>
                      <p className="ant-upload-hint">支持单个或批量上传</p>
                    </Upload.Dragger>,
                  )}
                </div>
              </Form.Item>

              <Form.Item wrapperCol={{span: 12, offset: 6}}>
                <Button type="primary" htmlType="submit"
                        handleSubmit={() => console.log(this.props.form.getFieldsValue())}>
                  Submit
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      );
    }
  }
);
